<template>
    <div class="table">
        <!--主体-->
        <div class="container">
            <i class="el-icon-refresh" style="font-size: 18px;padding-bottom: 20px" @click="update()"></i>
            <!--搜索-->
            <div class="handle-box">
                <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"
                          @keyup.enter.native="search">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
                <el-button type="primary" icon="search" @click="search()">搜索</el-button>
            </div>
            <!--医生、医院数量-->
            <div style="padding-bottom: 20px">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-1">
                                <i class="el-icon-view grid-con-icon" @click="doctor()"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">
                                        {{docQuantity}}
                                    </div>
                                    <div>医生</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-2">
                                <i class="el-icon-view grid-con-icon" @click="hospital()"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">
                                        {{hosQuantity}}
                                    </div>
                                    <div>医院</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
            <!--医生表格-->
            <div v-show="show">
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column label="医生" prop="title"></el-table-column>
                    <el-table-column label="医院" prop="hospital"></el-table-column>
                    <el-table-column label="科室" prop="dept"></el-table-column>
                    <el-table-column label="职称" prop="position"></el-table-column>
                    <el-table-column label="地区" prop="province"></el-table-column>
                </el-table>
                <el-row :gutter="20">
                    <el-col :offset="13">
                        <div class="page-bar">
                            <ul>
                                <li v-if="cur>1"><a @click="cur--,pageClick()">上一页</a></li>
                                <li v-if="cur==1"><a class="banclick">上一页</a></li>
                                <li v-for="index in indexs" :class="{ 'active': cur == index}">
                                    <a @click="btnClick(index)">{{ index }}</a>
                                </li>
                                <li v-if="cur!=all"><a @click="cur++,pageClick()">下一页</a></li>
                                <li v-if="cur == all"><a class="banclick">下一页</a></li>
                                <li><a>共<i>{{all}}</i>页</a></li>
                            </ul>
                        </div>
                    </el-col>

                </el-row>
            </div>
            <!--医院表格-->
            <div v-show="show1">
                <el-table :data="tableData1" border style="width: 100%">
                    <el-table-column label="医院" prop="hospital"></el-table-column>
                    <el-table-column label="等级" prop="hco_level"></el-table-column>
                    <el-table-column label="地区" prop="province"></el-table-column>
                </el-table>
                <el-row :gutter="20">
                    <el-col :offset="13">
                        <div class="page-bar">
                            <ul>
                                <li v-if="cur>1"><a @click="cur--,pageClick1()">上一页</a></li>
                                <li v-if="cur==1"><a class="banclick">上一页</a></li>
                                <li v-for="index in indexs" :class="{ 'active': cur == index}">
                                    <a @click="btnClick1(index)">{{ index }}</a>
                                </li>
                                <li v-if="cur!=all"><a @click="cur++,pageClick1()">下一页</a></li>
                                <li v-if="cur == all"><a class="banclick">下一页</a></li>
                                <li><a>共<i>{{all}}</i>页</a></li>
                            </ul>
                        </div>
                    </el-col>

                </el-row>
            </div>
        </div>
        <!--过滤-->
        <div class="container">
            <!--多选框-->
            <div class="selectBox">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                        </el-checkbox-group>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="success" @click='confirm()'>确定</el-button>
                    </el-col>
                </el-row>
            </div>
            <!--表格-->
            <div>
                <el-table :data="tableData3" border style="width: 100%">
                    <el-table-column v-if="show2" label="省" prop="province"></el-table-column>
                    <el-table-column v-if="show3" label="医院" prop="hospital"></el-table-column>
                    <el-table-column v-if="show4" label="级别" prop="hco_level"></el-table-column>
                    <el-table-column v-if="show5" label="科室" prop="dpt_cleaned"></el-table-column>
                    <el-table-column v-if="show6" label="职称" prop="position_cleaned"></el-table-column>
                    <el-table-column label="数量" prop="doc_count"></el-table-column>
                </el-table>
                <el-row :gutter="20" style="height: 50px">
                    <el-col :offset="18" style='padding-top: 20px'>
                        <el-button size="small" @click="btnClick2()">上一页</el-button>
                        <el-button size="small" @click="pageClick2()">下一页</el-button>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
    const cityOptions = ['省', '医院', '级别', '科室', '职称'];
    export default {
        components: {},
        data() {
            return {
                docQuantityUrl: 'http://bigdata-api.huimeimt.cn/resource_server/hcohcphandle/hcohcp_hcpcount',
                hosQuantityUrl: 'http://bigdata-api.huimeimt.cn/resource_server/hcohcphandle/hcohcp_hcocount',
                doctorUrl: 'http://bigdata-api.huimeimt.cn/resource_server/hcohcphandle/hcohcp_hcpinfo/',
                hospitalUrl: 'http://bigdata-api.huimeimt.cn/resource_server/hcohcphandle/hcohcp_hcoinfo/',
                filtrateUrl: 'http://bigdata-api.huimeimt.cn/resource_server/hcohcphandle/advanced_query',
                /*搜索*/
                select_word: '',
                /*Vue组件*/
                all: "",
                cur: 1,
                /*Vue组件*/
                previousPage: "",
                nextPage: "",
                /*医生表格*/
                tableData: [],
                show: false,
                /*医院表格*/
                tableData1: [],
                show1: false,
                /*表格*/
                tableData3: [],
                show2: false,
                show3: false,
                show4: false,
                show5: false,
                show6: false,
                /*医生、医院数量*/
                docQuantity: 0,
                hosQuantity: 0,
                /*token*/
                access_token: '',
                /*数据*/
                form: {
                    dept: '',
                    experience: '',
                    hco_level: '',
                    hospital: '',
                    position: '',
                    province: '',
                    title: '',
                },
                form1: {
                    hco_level: '',
                    hospital: '',
                    province: '',
                },
                form2: {
                    province: '',
                    hospital: '',
                    hco_level: '',
                    dept: '',
                    position: '',
                    doc_count: '',
                },
                /*多选框*/
                checkedCities: [],
                cities: cityOptions,
                doctorData: {
                    before: {},
                    next: {},
                    isNext: "2",
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                    keyword: "",
                    adv_count: ""
                },
            }
        },
        created() {
            this.gainTtoken();
        },
        methods: {
            gainTtoken() {
                this.$axios({
                    method: 'GET',
                    url: 'http://bigdata-oauth.huimeimt.cn/Dataplatform/token',
                }).then((res) => {
                    this.access_token = res.data.access_token
                })
            },
            /*搜索*/
            search() {
                if(this.excludeSpecial(this.select_word) != ""){
                    let data = {"data": this.excludeSpecial(this.select_word)};
                    this.$axios({
                        method: 'POST',
                        headers: {'Content-Type': 'application/json;charset=UTF-8'},
                        url: this.docQuantityUrl + "?access_token=" + this.access_token,
                        data: JSON.stringify(data),
                    }).then((res) => {
                        TweenLite.to(this.$data, 0.5, {docQuantity: res.data.result})
                    })
                    this.$axios({
                        method: 'POST',
                        headers: {'Content-Type': 'application/json;charset=UTF-8'},
                        url: this.hosQuantityUrl + "?access_token=" + this.access_token,
                        data: JSON.stringify(data),
                    }).then((res) => {
                        TweenLite.to(this.$data, 0.5, {hosQuantity: res.data.result})
                    })
                }else{
                    this.$message({
                        message: '请正确操作！',
                        type: 'warning'
                    });
                }
                },
            /*医生*/
            doctor() {
                this.show = true;
                this.show1 = false;
                this.all = "";
                this.cur = 1;
                this.$axios({
                    method: 'GET',
                    url: this.doctorUrl + this.excludeSpecial(this.select_word) + "?access_token=" + this.access_token,
                }).then((res) => {
                    this.tableData = res.data.result;
                    this.all = Math.round(this.docQuantity / 10)
                })
            },
            btnClick(data) {
                if (data != this.cur) {
                    this.cur = data
                    this.request(this.doctorUrl, this.select_word, this.access_token, this.cur)
                }
            },
            pageClick() {
                this.request(this.doctorUrl, this.select_word, this.access_token, this.cur)
            },
            request(url, word, token, cur) {
                this.$axios({
                    method: 'GET',
                    url: url + word + "?access_token=" + token + "&page=" + cur,
                }).then((res) => {
                    this.tableData = res.data.result;
                })
            },
            /*医院*/
            hospital() {
                this.show = false;
                this.show1 = true;
                this.all = "";
                this.cur = 1;
                this.$axios({
                    method: 'GET',
                    url: this.hospitalUrl + this.excludeSpecial(this.select_word) + "?access_token=" + this.access_token,
                }).then((res) => {
                    this.tableData1 = res.data.result;
                    this.all = Math.round(this.hosQuantity / 10)
                })
            },
            btnClick1(data) {
                if (data != this.cur) {
                    this.cur = data
                    this.request1(this.hospitalUrl, this.select_word, this.access_token, this.cur)
                }
            },
            pageClick1() {
                this.request1(this.hospitalUrl, this.select_word, this.access_token, this.cur)

            },
            request1(url, word, token, cur) {
                this.$axios({
                    method: 'GET',
                    url: url + word + "?access_token=" + token + "&page=" + cur,
                }).then((res) => {
                    this.tableData1 = res.data.result;
                })
            },
            /*多选框*/
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.cities.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
                /*数据条件*/
                if (JSON.stringify(this.checkedCities).indexOf('省') > -1) {
                    this.doctorData.one = "province";
                    this.show2 = true
                } else {
                    this.doctorData.one = "";
                    this.show2 = false
                }
                if (JSON.stringify(this.checkedCities).indexOf('医院') > -1) {
                    this.doctorData.two = "hospital";
                    this.show3 = true
                } else {
                    this.doctorData.two = "";
                    this.show3 = false
                }
                if (JSON.stringify(this.checkedCities).indexOf('级别') > -1) {
                    this.doctorData.three = "hco_level";
                    this.show4 = true
                } else {
                    this.doctorData.three = "";
                    this.show4 = false
                }
                if (JSON.stringify(this.checkedCities).indexOf('科室') > -1) {
                    this.doctorData.four = "dpt_cleaned";
                    this.show5 = true
                } else {
                    this.doctorData.four = "";
                    this.show5 = false
                }
                if (JSON.stringify(this.checkedCities).indexOf('职称') > -1) {
                    this.doctorData.five = "position_cleaned";
                    this.show6 = true
                } else {
                    this.doctorData.five = "";
                    this.show6 = false
                }
                this.doctorData.keyword = this.excludeSpecial(this.select_word);
                this.doctorData.adv_count = JSON.stringify(this.checkedCities.length);
            },
            confirm() {
                this.doctorData.keyword = this.excludeSpecial(this.select_word);
                this.doctorData.isNext = "2";
                this.req()
            },
            btnClick2() {
                if(this.tableData3.length >=10){
                    this.doctorData.isNext = "0";
                    for (var i = 0; i < this.tableData3.length; i++) {
                        this.doctorData.before = this.tableData3[0];
                        this.doctorData.next = this.tableData3[9];
                    }
                    delete this.doctorData.before.doc_count;
                    delete this.doctorData.next.doc_count;
                    this.req()
                }
            },
            pageClick2() {
                if(this.tableData3.length >=10){
                    this.doctorData.isNext = "1";
                    for (var i = 0; i < this.tableData3.length; i++) {
                        this.doctorData.before = this.tableData3[0];
                        this.doctorData.next = this.tableData3[9];
                    }
                    delete this.doctorData.before.doc_count;
                    delete this.doctorData.next.doc_count;
                    this.req()
                }
            },
            req(){
                if(this.doctorData.keyword!="" && this.checkedCities.length > 0 ){
                    this.$axios({
                        method: 'POST',
                        headers: {'Content-Type': 'application/json;charset=UTF-8'},
                        data: JSON.stringify(this.doctorData),
                        url: this.filtrateUrl + "?access_token=" + this.access_token,
                    }).then((res) => {
                        this.tableData3 = res.data.result
                    })
                }else{
                    this.$message({
                        message: '请正确操作！',
                        type: 'warning'
                    });
                }
            },
            /*刷新*/
            update() {location.reload();},
            /*去除非法字符*/
            excludeSpecial(s) {s = s.replace(/[^\u4e00-\u9fa5a-zA-Z0-9\w]/g,' ');return s;}
        },
        computed: {
            indexs() {
                var left = 1;
                var right = this.all;
                var ar = [];
                if (this.all >= 5) {
                    if (this.cur > 3 && this.cur < this.all - 2) {
                        left = this.cur - 2
                        right = this.cur + 2
                    } else {
                        if (this.cur <= 3) {
                            left = 1
                            right = 5
                        } else {
                            right = this.all
                            left = this.all - 4
                        }
                    }
                }
                while (left <= right) {
                    ar.push(left)
                    left++
                }
                return ar
            },
        }
    }
</script>

<style scoped>
    .container{
        margin: 10px 0;
    }
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }

    .grid-content {
        display: flex;
        align-items: center;
        height: 100px;
    }

    .grid-cont-right {
        flex: 1;
        text-align: center;
        font-size: 12px;
        color: #999;
    }

    .grid-num {
        font-size: 30px;
        font-weight: bold;
    }

    .grid-con-icon {
        font-size: 50px;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        color: #fff;
    }

    .grid-con-1 .grid-con-icon {
        background: rgb(45, 140, 240);
    }

    .grid-con-1 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-2 .grid-con-icon {
        background: rgb(100, 213, 114);
    }

    .grid-con-2 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-3 .grid-con-icon {
        background: rgb(242, 94, 67);
    }

    .grid-con-3 .grid-num {
        color: rgb(242, 94, 67);
    }

    .page-bar {
        margin: 40px;
    }

    ul, li {
        margin: 0px;
        padding: 0px;
    }

    li {
        list-style: none
    }

    .page-bar li:first-child > a {
        margin-left: 0px
    }

    .page-bar a {
        border: 1px solid #ddd;
        text-decoration: none;
        position: relative;
        float: left;
        padding: 6px 12px;
        margin-left: -1px;
        line-height: 1.42857143;
        color: #337ab7;
        cursor: pointer
    }

    .page-bar a:hover {
        background-color: #eee;
    }

    .page-bar a.banclick {
        cursor: not-allowed;
    }

    .page-bar .active a {
        color: #fff;
        cursor: default;
        background-color: #337ab7;
        border-color: #337ab7;
    }

    .page-bar i {
        font-style: normal;
        color: #d44950;
        margin: 0 4px;
        font-size: 12px;
    }

    .selectBox {
        padding: 10px 0;
        line-height: 40px;
    }
</style>
